<!--
 * @Author: WuFeng <763467339@qq.com>
 * @Date: 2023-03-15 17:03:56
 * @LastEditTime: 2023-03-27 15:08:18
 * @LastEditors: WuFeng <763467339@qq.com>
 * @Description: 角色切换
 * @FilePath: \vue3-element-plus-web\src\views\Layouts\Admin\components\RoleSwitch\DropDown.vue
 * Copyright 版权声明
-->
<template>
  <el-dropdown v-if="roleSwitch === true" class="switch-lang-container avatar-container" trigger="click">
    <div class="avatar-wrapper">
      <span>切换角色【{{currentRoleName}}】</span>
      <el-icon><caret-bottom /></el-icon>
    </div>
    <template #dropdown>
      <el-dropdown-menu class="user-dropdown">
        <span v-for="(item, index) in roleList" @click="handleConfirm(item.id)" :key="index">
          <el-dropdown-item>
            {{item.name}}
          </el-dropdown-item>
        </span>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script>
import { mapGetters } from 'vuex'
import router from '@/router'
import { CaretBottom } from '@element-plus/icons-vue'

export default {
  name: 'Dialog',
  components: {
    CaretBottom
  },
  computed: {
    ...mapGetters([
      'roleSwitch',
      'userInfo'
    ]),
    roleList() {
      return this.userInfo.roles || []
    },
    currentRoleName() {
      let roleName = ''
      const roleId = this.userInfo.currentRole || ''
      const roles = this.userInfo.roles || []
      for (const item of roles) {
        if (roleId === `${item.id}`) {
          roleName = item.name || ''
          break
        }
      }
      return roleName
    }
  },
  data() {
    return {
    }
  },
  created() {
  },
  methods: {
    handleConfirm(roleId) {
      this.$store.dispatch('SelectRole', {
        roleId
      }).then(() => {
        // 判断当前用户是否已拉取完user_info信息
        this.$store
          .dispatch('GetUserInfo')
          .then((res) => {
            // 拉取user_info
            const menus = res.data.menus
            // 根据 menus 权限生成可访问的路由表
            this.$store
              .dispatch('GenerateRoutes', { menus })
              .then(() => {
                if (this.$store.getters.addRouters.length > 0) {
                  for (const item of this.$store.getters.addRouters) {
                    router.addRoute(item) // 动态添加可访问路由表
                  }
                }
                this.$notify({
                  title: '提示',
                  message: '切换角色成功',
                  type: 'success',
                  duration: 2000,
                  position: 'bottom-right'
                })
                this.$router.push('/')
              })
              .catch((err) => {
                err
              })
          })
          .catch((err) => {
            err
          })
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.avatar-container {
  height: 50px;
  line-height: 50px;
  margin-left: 15px;
  .avatar-wrapper {
    cursor: pointer;
    // margin-top: 5px;
    position: relative;
    .user-avatar {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      vertical-align: middle;
      margin-right: 10px;
    }
  }
}
</style>

